<template>
  <div class="language-selector" ref="selectorRef">
    <!-- 触发区域：显示当前语言 + 图标 -->
    <div 
      class="selector-trigger" 
      @click="toggleOpen"
    >
      <!-- 地球图标 -->
      <img src="@/assets/货币@2x.png" alt="" class="icon-globe">
      <span class="current-lang">{{ currentCurrencyLabel }}</span>
      <!-- 下拉箭头 -->
      <svg 
        class="icon-arrow" 
        :class="{ rotated: isOpen }" 
        viewBox="0 0 24 24"
      >
        <path d="M7 10l5 5 5-5z"/>
      </svg>
    </div>

    <!-- 下拉选项列表 -->
    <ul class="options-list" v-show="isOpen">
      <li 
        v-for="(lang, index) in currencyOptions" 
        :key="index" 
        @click="selectCurreny(lang)"
      >
        {{ lang.label }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapMutations} from 'vuex'
import i18n from '@/lang' // 引入i18n实例

export default {
  // 响应式数据
  data() {
    return {
      isOpen: false,       // 下拉框展开状态      // 语言选项映射表
      currencyOptions: [
        { label: i18n.t('currency.usd'), value: 'usd' },
        { label: i18n.t('currency.cny'), value: 'cny' },
      ]
    }
  },
  computed: {
    ...mapGetters(['getCurrency']),
    currentCurrencyLabel() {
      const current = this.currencyOptions.find(item => item.value === this.getCurrency)
      return current ? current.label : i18n.t('currency.usd') // 默认显示美元
    }
  },
    // 监听语言变化，更新货币选项的label
  watch: {
    '$i18n.locale'(newLocale) {
      this.currencyOptions = [
        { label: i18n.t('currency.usd'), value: 'usd' },
        { label: i18n.t('currency.cny'), value: 'cny' },
      ]
    }
  },
  // 方法
  methods: {
    ...mapMutations(['setCurrency']),
    // 切换下拉框展开/收起
    toggleOpen() {
      this.isOpen = !this.isOpen;
    },
    selectCurreny(lang) {
      console.log("🚀 ~ selectCurreny ~ lang:", lang)
      this.setCurrency(lang.value)
      // 更新显示并关闭下拉
      this.isOpen = false
    },
    // 点击外部关闭下拉框
    handleClickOutside(e) {
      if (this.$refs.selectorRef && !this.$refs.selectorRef.contains(e.target)) {
        this.isOpen = false;
      }
    }
  },

  // 生命周期：绑定全局点击事件
  mounted() {
    document.addEventListener('click', this.handleClickOutside);
  },

  // 生命周期：解绑全局点击事件（防止内存泄漏）
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  }
}
</script>

<style scoped>
/* 样式部分与原代码保持一致 */
.language-selector {
  width: 160px;
  height: 54px;
  position: relative;
  font-family: Arial, sans-serif;
  background: rgba(255,255,255,0.6);
  border-radius: 22px;
  border: 1px solid #FFFFFF;
}

.selector-trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: border-color 0.3s ease;
  border-radius: 22px;
}

.selector-trigger:hover {
  border-color: #DADADA;
}

.icon-globe, .icon-arrow {
  fill: #666;
  transition: transform 0.3s ease;
}
.icon-globe {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.icon-arrow {
  width: 20px;
  height: 20px;
}
.icon-arrow.rotated {
  transform: rotate(180deg);
}

.current-lang {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #333;
}

.options-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background-color: #FFFFFF;
  border: 1px solid #ECECEC;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 999;
}

.options-list li {
  padding: 12px 16px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.options-list li:hover {
  background-color: #F8F8F8;
}
</style>
